<template>
  <el-card :border="false" style="margin-bottom: 15px; height: 20%">
    <StatisticCard style="width: 100%;"/>
  </el-card>

  <div class="scroll-container">
    <el-scrollbar ref="scrollbarRef">
      <el-card :border="false">
        <div v-for="item in project_push_msg" :key="item.Project.id" class="card-item">
          <div class="mail-info">
            <el-tag :closable="false" class="info-tag">项目名称：{{ item.Project.name }}</el-tag>
            <el-tag :closable="false" class="info-tag">项目创建时间：{{ formatDate(item.Project.created_at) }}</el-tag>
          </div>
          <div>
            <el-button class="view-button" type="primary" @click="openDrawer(item)">查看</el-button>
          </div>
        </div>
      </el-card>
    </el-scrollbar>
  </div>

  <el-drawer
      v-model="drawerVisible"
      :before-close="handleClose"
      size="40%"
      title="Git提交信息时间线"
  >

    <el-timeline style="max-width: 600px">
      <el-timeline-item
          v-for="push in currentProject.PushMessage"
          :key="push.id"
          :timestamp="  formatDate(push.commit_timestamp)"
          placement="top"
          type="success"
      >
        <el-card>
          <h4>推送人名称：{{ push.pusher_name }} </h4>
          <h4>项目名称：{{ currentProject.Project.name }}</h4>
          <p>
            <a
                :href="push.compare"
                style="color: #409eff; text-decoration: none;"
                target="_blank"
            >
              提交信息：{{ push.commit_message }}
            </a>
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <template #footer>
      <el-button type="warning" @click="closeDrawer">关闭</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import axios from '../http/index.js';
import {ElMessage} from "element-plus";
import StatisticCard from '../components/StatisticCard.vue';

let project_push_msg = ref([]);
let currentProject = ref()

// 获取全部的邮件
function GetLogs() {
  axios.get('log/getLogs')
      .then((response) => {
        if (response.code === 1) {
          ElMessage({
            message: '查询数据加载成功',
            type: 'success'
          });
          console.log( response.project_push_msg);
          project_push_msg.value = response.project_push_msg
        }
      })
      .catch((error) => {
        console.log(error);
      });
}

let drawerVisible = ref(false);
// 打开抽屉
const openDrawer = (mail) => {
  drawerVisible.value = true;
  currentProject.value = mail;
};

// 关闭抽屉
const closeDrawer = () => {
  drawerVisible.value = false;
};


// 抽屉关闭前的回调
const handleClose = (done) => {
  closeDrawer();
  done();
};


// 格式化日期为 YYYY-MM-DD
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toISOString().split('T')[0];
};

onMounted(() => {
  GetLogs();
});
</script>

<style scoped>
.scroll-container {
  height: 70%;
}

.card-item {
  margin: 10px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background-color: #d4d4d4;
  padding: 0 20px;
  box-sizing: border-box;
}

.mail-info {
  display: flex;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
}

.info-tag {
  margin-right: 10px;
  white-space: nowrap;
}

.view-button {
  margin-left: 10px;
}

.drawer-content {
  padding: 10px;
}
</style>